<template>
  <el-dialog v-model="dialogTableVisible" title="申请详情" destroy-on-close width="80%" v-loading="loading">

    <el-scrollbar max-height="400px" style="border: 2px solid lightblue">
      <ClaimApply v-if="applyItem.type==='claim'" :apply-item="applyItem"></ClaimApply>
      <AddApply v-else-if="applyItem.type==='add'" :apply-item="applyItem"></AddApply>
      <UpdateApply v-else-if="applyItem.type==='update'" :apply-item="applyItem"></UpdateApply>
      <DeleteApply v-else-if="applyItem.type==='delete'" :apply-item="applyItem"></DeleteApply>
    </el-scrollbar>
    <el-divider></el-divider>
    <div class="reject">
      <div style="margin-bottom: 5px">
        不予通过理由
      </div>
      <div>
        <el-input
            v-model="reject"
            :rows="2"
            type="textarea"
            placeholder="请输入不予通过理由"/>
      </div>
      <div id="other">
        注：若申请不予通过则必须填写不予通过理由
      </div>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button type="warning" @click="notPermit">不予通过</el-button>
        <el-button type="primary" @click="permit">通过审核</el-button>
      </span>
    </template>
  </el-dialog>
  
  
</template>

<script>
import axios from "../../utils/MyAxios";
import qs from "qs";
import {ElMessage, ElMessageBox} from "element-plus";
import ClaimApply from "./apply/ClaimApply";
import AddApply from "./apply/AddApply";
import UpdateApply from "./apply/UpdateApply";
import DeleteApply from "./apply/DeleteApply";


export default {
  name: "ApplyInfo",
  
  data(){
    return{
      dialogTableVisible:false,
      applyItem: null,
      reject: '',
      index: null,
      loading: true
    }
  },
  methods:{
    notPermit(){
      if(this.reject===null||this.reject===''){
        ElMessage.info("必须填写不予通过理由")
      }else {
        ElMessageBox.alert('是否确认不予通过申请', '再次确认', {
          confirmButtonText: '确认',
          callback: (action) => {
            if(action==='confirm')
              this.submit(false);
          }
        })
      }
    },
    permit(){
      ElMessageBox.alert('是否确认通过申请', '再次确认', {
        confirmButtonText: '确认',
        callback: (action) => {
          if(action==='confirm')
            this.submit(true);
        }
      })
    },
    submit(isPermitted){
      let data = {
        managerId: localStorage.getItem('managerId'),
        applyId: this.applyItem.applyId,
        isPermitted: isPermitted,
        reject: this.reject
      }
      this.loading = true;
      axios.post('/api/apply/vertify',qs.stringify(data))
          .then(res=>{
            console.log(res);
            this.loading = false;
            data = res.data;
            if(data.code>0){
              ElMessage.info(data.msg)
              this.close()
            }else if(data.code===0){
              ElMessage.success('提交成功')
              this.close()
            }else {
              ElMessage.error(data.msg);
            }
          }).catch(err=>{
            this.loading = false;
      })
    },
    close(){
      this.dialogTableVisible = false;
      this.$emit('permit',this.index);
    },
    openInfo(applyId,index){
      this.index = index
      let data = {
        applyId
      }
      axios.post('/api/apply/info',qs.stringify(data))
      .then(res=>{
        console.log(res);
        data = res.data;
        if(data.code!==0){
          ElMessage.error(data.msg);
        }else{
          this.applyItem = data.data;
          this.dialogTableVisible = true;
          this.loading = false;
        }
      })
      
    }
  },
  components:{
    ClaimApply,
    AddApply,
    UpdateApply,
    DeleteApply
  },
  emits:['permit']
}
</script>

<style scoped>
.reject{
  font-size: large;
  font-weight: bold;
}
#other{
  font-size: small;
  color: red;
  font-weight: normal;
}
</style>